<template>
  <el-container>
    <!-- <el-header></el-header> -->
    <el-row class="el-card-row outter-wrapper">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>教学项目获奖</span>
        </div>
        <div class="text item">
          <!-- form表单 -->
          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="上报人：">
                  <el-input
                    v-model="form.email"
                    disabled
                    placeholder="XXX"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="成果类型：">
                  <el-select
                    v-model="form.type"
                    placeholder="请选择成果类型"
                    disabled
                  >
                    <el-option label="教学项目" value="stuAward"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目名称：" prop="itemname">
                  <el-input v-model="form.itemname" placeholder="填写项目名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="奖项名称：" prop="awardname">
                  <el-input v-model="form.awardname" required="true" placeholder="填写奖项名称"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="奖项级别：" prop="awardlevel">
                  <el-input v-model="form.awardlevel" placeholder="填写奖项级别"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="获奖时间：" prop="date">
                  <el-date-picker
                    v-model="form.date"
                    type="date"
                    placeholder="选择获奖日期"
                    format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="颁奖单位：" prop="unit">
                  <el-input v-model="form.unit" placeholder="填写颁奖单位"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="排名：" prop="rankno">
                  <el-input v-model="form.rankno"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item label="实证文件：" prop="file">
                <el-upload
                  class="upload-demo"
                  :file-list="form.filelist"
                  :show-file-list="true"
                  drag
                  action="http://www.baidu.com"
                  :http-request="uploadFile"
                  :on-change="addFile"
                  :before-upload="beforeUpload"
                  :multiple="false"
                  :auto-upload="false"
                  accept=".zip"
                  :limit="1"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将文件拖到此处，或<em>点击上传</em>
                  </div>
                  <div class="el-upload__tip" slot="tip">
                    只能上传单个zip压缩文件,重复上传会导致文件覆盖
                  </div>
                </el-upload>
              </el-form-item>
            </el-row>

            <el-row>
              <el-form-item>
                <el-button type="success" @click="onSubmit('form')">立即上报</el-button>
                <p class="upload-tip-info">退出后将不再保存此次填写的信息.</p>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </el-row></el-container
  >
</template>

<script>
import * as IndexService from '@/service/index/indexService'
import * as UploadService from '@/service/upload/uploadService'
export default {
  name: 'teacItem',
  data() {
    return {
      form: {
        email: '', //上报人
        type: '教学项目',
        itemname: '', //项目名称
        awardname: '', //奖项名称
        awardlevel: '', //奖项级别
        date: '', //获奖日期
        unit: '', //颁奖单位
        rankno: '', //排名
        evidence:'',//文件远程链接地址
        file: '', //文件
        filelist: [],
      },
      //验证规则
      rules:{
        itemname: [{required:true,message:"请输入项目名称",trigger:"blur"},],
        awardname: [{required:true,message:"请输入奖项名称",trigger:"blur"},],
        awardlevel: [{required:true,message:"请输入奖项级别",trigger:"blur"},],
        date: [{required:true,message:"请选择获奖时间",trigger:"blur"},],
        unit: [{required:true,message:"请输入颁奖单位",trigger:"blur"},],
        rankno: [{required:true,message:"请输入排名信息",trigger:"blur"},],
        file: [{required:true,message:"请选择实证文件",trigger:"blur"},],
      }
    }
  },
  mounted() {
    //获取用户信息
    let email = localStorage.getItem('email')
    this.form.email = email ? email : 'XXX@xx.com'
  },
  methods: {
    //添加文件-添加文件、上传成功和上传失败时都会被调用
    addFile(file, fileList) {
      //记录文件名称
      this.form.file = file
      // console.log(this.form.file)
    },
    //文件上传之前文件类型检验
    beforeUpload(file) {
      // console.log(file)
    },
    //文件上传方法
    uploadFile(val) {
      // console.log(val)
    },

    //提交信息
    onSubmit(form) {
      // console.log('submit!')
      //表单信息校验
      this.$refs[form].validate((valid)=>{
        if (valid){
          //验证通过
          //1-文件上传操作
          let formdata=new FormData();
          formdata.append("file",this.form.file.raw);
          formdata.append("username",this.form.email);
          UploadService.uploadFile(formdata).then((res)=>{
            //判断文件上传结果
            if (res.data&&res.data.status){
              //上传成功
              this.$message({
                message: '文件已上传！',
                type: 'success',
              })
              //2-获取文件远程存储链接地址
              this.form.evidence=res.data.url;
              //3-封装上传信息
              let teacItemInoObj={
                email:this.form.email,
                itemname:this.form.itemname,
                awardname:this.form.awardname,
                awardlevel:this.form.awardlevel,
                date:this.form.date,
                unit:this.form.unit,
                rankno:this.form.rankno,
                evidence: this.form.evidence
              }
              IndexService.uploadTeacItemInfo(teacItemInoObj).then(res=>{
                if(res.data==1){
                  //信息上报成功
                  this.$message({
                    message:"信息上报成功!",
                    type:"success",
                  })
                }else {
                  //信息上报失败
                  this.$message.error("信息上报失败!")
                }
              })
            }else {
              //上传失败
              this.$message.error("文件上传出错,信息上报失败")
            }
          }).catch(error=>{
            //文件上传出错
            this.$message.error("信息上报失败!")
            //尝试删除已经上传的文件
            if (this.form.evidence){
              UploadService.deleteFile(this.form.email,this.form.evidence).then((res)=>{
                if (res.data==1){
                  this.$message({
                    message: '已删除无效文件!',
                    type: 'success',
                  })
                }
              })
            }
          })
        }else{
          //验证未通过
          this.$message.error("请将信息填写完整后再提交!")
          return false;
        }
      });

    },
  },
}
</script>
<style scoped>
.outter-wrapper{
  padding-top: 50px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.el-card-row {
  margin: 0 auto;
  width: 55%;
}

.box-card {
  /* width: 480px; */
}
.el-card__header span {
  color: #409eff;
  font-weight: 700;
}
.box-card:hover {
  /* width: 480px; */
  box-shadow: 0 5px 15px 0 rgb(0 0 0 / 30%);
}
.el-button-sendcode {
  background-color: #17a2b8;
}

.el-select,
.el-date-editor {
  /* width: 346.5px; */
  width: 100%;
}
.upload-tip-info {
  color: #ccc;
}
</style>
